<template>
  <div class="tag-item">
    <div class="tag-content" :title="`${modelValue.label}：${value}`">
      <span class="tag-prefix" v-if="modelValue.label">
        {{ `${modelValue.label}:` }}
      </span>
      <span class="tag-value">{{ value }}</span>
    </div>
    <i class="close-btn" @click="emit('delete', modelValue)">
      <tag-close />
    </i>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { computed } from 'vue'

import TagClose from '../icons/TagClose.vue'
import type { SearchValue } from '../types'

const props = defineProps<{
  modelValue: SearchValue
}>()

const emit = defineEmits<{
  'update:modelValue': [value: SearchValue]
  delete: [value: SearchValue]
}>()

const value = computed(() => {
  const isDate = props.modelValue.isDate
  if (isDate) {
    const val = props.modelValue.value.map(v =>
      v ? dayjs.unix(+v).format('YYYY/MM/DD') : v
    )
    if (val.filter(Boolean).length > 1) return val.join('-')
    if (val[0]) return `≥${val[0]}`
    if (val[1]) return `≤${val[1]}`
  }
  return props.modelValue.options.map(v => v.label).join(',')
})
</script>
